<!-- eslint-disable no-use-before-define -->
<!--
 * @Description: 群相关信息编辑
 * @Author: Kerwin
 * @Date: 2023-12-08 12:37:48
 * @LastEditTime: 2025-04-11 16:12:37
 * @LastEditors:  Please set LastEditors
-->


<template>
  <view class="container">
    <view class="tit">{{ info.tit }}</view>
    <view class="con">{{ info.con }}</view>
    <view class="inpt">
      <view class="imgBox" v-if="info.type == 4">
        <!-- <u-image
          v-for="(item, index) in avatarList"
          :key="index"
          :src="getImgFullPath(item)"
          mode="widthFix"
          width="25rpx"
          height="25rpx"
          :error-icon="RY_AVATAR"
        ></u-image> -->
        <u-avatar v-for="(item, index) in avatarList" :src="getImgFullPath(item)"></u-avatar>
      </view>
      <view v-if="info.type != 5" class="inptr">
        <u-input v-model="textVal" style="background-color: #fff;" type="textarea" :border="true" :height="40"
          :auto-height="true" clearable v-if="type != 1" />
        <u-input  v-else v-model="textVal" type="nickname" :border="true" :height="60" :auto-height="true" clearable
          @change="onChange" />
      </view>
    </view>
    <uv-qrcode v-if='info.type == 5' class="qrClass" ref="qrcode" canvas-id="qrcode" :value="qrcodeValue" size="300rpx"
    :options="qrcodeOptions"></uv-qrcode>
    <view class="btn">
      <u-button  v-if="info.type == 5" size="medium" type="primary"  @click="exportQRcode">保存二维码</u-button>
      <u-button v-else type="success" size="default" :custom-style="{ width: '200rpx' }" :disabled="!changed" ripple
        @click="submit">完成</u-button>
    </view>

  </view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import { getImgFullPath } from '@/utils/index'
import { RY_AVATAR } from '@/common/config'
import { socialApi } from '@/api'
import { useUserStore } from '@/store'
//二维码
import uvQrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue';
const userStore = useUserStore()
const qrcode = ref(null);
const qrcodeValue = ref('http://192.168.169.176:5173/#/');
const qrcodeOptions = ref({
  useDynamicSize: false,
  errorCorrectLevel: 'Q',
  margin: 10,
  areaColor: '#fff',
});

const infoTemplate = [
  {
    type: 1,
    tit: '我在群里的昵称',
    con: '昵称修改后，只会在此群内显示，群内成员都可以看见',
    key: 'nickname',
    fn: circleUserUpdate
  },
  {
    type: 2,
    tit: '修改群聊名称',
    con: '修改群聊名称后，将在群内通知其他成员',
    key: 'name',
    fn: circleUpdate
  },
  {
    type: 3,
    tit: '修改群简介',
    con: '修改群简介后，群内成员都可以看见',
    key: 'remark',
    fn: circleUpdate
  },
  {
    type: 5,
    tit: `群聊`,
    con: '扫码入群，加入一码人脉。',
    key: 'remark',
    fn: circleUpdate
  }
]
const type = ref(1)
const info = ref({})
const avatarList = ref([])
const textVal = ref('')
const groupInfo = ref({gid:'',cid:'',groupCode:''})
const changed = computed(() => {
  return !!textVal.value
})
async function circleUserUpdate() {
  const { code } = await socialApi.circleUserUpdate({
    chatGroupId: groupInfo.value.gid,
    friendCircleId: groupInfo.value.cid,
    userId: userStore.userInfo.id,
    nickname: textVal.value,
    id: info.value.id
  })
  if (code === 200) {
    uni.showToast({
      icon: 'none',
      title: '更新成功'
    })
    uni.navigateBack({ delta: 1 })
  }
}
async function circleUpdate() {
  const data = {
    chatGroupId: groupInfo.value.gid,
    friendCircleId: groupInfo.value.cid,
    id: info.value.id
  }
  if (type.value === 2) {
    data.name = textVal.value
  }
  if (type.value === 3) {
    data.remark = textVal.value
  }
  const { code } = await socialApi.circleUpdate(data)
  if (code === 200) {
    uni.showToast({
      icon: 'none',
      title: '更新成功'
    })
    uni.navigateBack({ delta: 1 })
  }
}
function submit() {
  info.value.fn()
}

const exportQRcode = () => {
  qrcode.value.toTempFilePath({
    success: (res) => {
      qrcode.value.save({
        success: () => {
          
        },
        fail: () => {
         
        },
      });
    },
  });
};

function onChange(e: { detail: { value: string } }) {
  textVal.value = e.detail.value
}
 

onLoad((option) => {
  type.value = Number(option?.type)
  groupInfo.value = JSON.parse(option?.groupInfo)
  avatarList.value = JSON.parse(option?.avatarList)
  if (!option?.type) {
    uni.navigateBack()
  }
  console.log(window.location.origin,'跳转的url');
  
  info.value = infoTemplate.find((item) => item.type === type.value) as {}

  if (type.value === 1) {
    const mySelfInfoInGroup = JSON.parse(
      uni.getStorageSync('mySelfInfoInGroup')
    )
    textVal.value = mySelfInfoInGroup?.circle_nickname
    info.value.id = mySelfInfoInGroup?.fid
  } else if (type.value === 2) {
    const groupInfo = JSON.parse(option?.groupInfo)
    textVal.value = groupInfo?.name
    info.value.id = groupInfo?.id
  } else if (type.value === 3) {
    const groupInfo = JSON.parse(option?.groupInfo)
    textVal.value = groupInfo?.remark
    info.value.id = groupInfo?.id
  } else if (type.value === 5) {
    info.value.tit = `群聊：${groupInfo.value.name}`
  }
  console.log(groupInfo.value.groupCode, 8888888)
  qrcodeValue.value = `${window.location.origin}/#/packageD/pages/chatGroup/c_qrJoinChatGroup?groupCode=${groupInfo.value.groupCode}&gid=${groupInfo.value.gid}&cid=${groupInfo.value.cid}`


})
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  text-align: center;

  .tit {
    font-size: 40rpx;
    font-weight: bold;
    margin-top: 100rpx;
  }

  .con {
    margin-top: 40rpx;
  }

  .inpt {
    display: flex;
    align-items: center;
    margin-top: 40rpx;

    .imgBox {
      width: 95rpx;
      height: 95rpx;
      border-radius: 8rpx;
      background: #ccc;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 6;
      margin-right: 18rpx;
    }

    .inptr {
      flex: 1;
    }
  }

  .btn {
    margin-top: 100rpx;
  }
}

.qrClass {
  width: 300rpx;
  height: 300rpx;
  margin: auto;
}
</style>
